<script setup lang="ts">
import {storeToRefs} from "pinia";
import {useMaterialInstanceStore} from "@/stores/material.instance"
import BaseContainerMaterial from "@/material/container/BaseContainerMaterial.vue";
import {MaterialRequest} from "@/components/materia-outline/js/material.request";

const materialInstanceStore = useMaterialInstanceStore();
const {materialInstanceList} = storeToRefs(materialInstanceStore);
MaterialRequest.getMaterialInstance().then(v=>{
  if(v){
    materialInstanceStore.initMaterialInstanceList(v);
  }
})
</script>

<template>
  <div class="zhtt-form-builder-generator-main">
    <BaseContainerMaterial :material="{children: materialInstanceList, class: 'zhtt-smooth-container'}"></BaseContainerMaterial>
  </div>
</template>

<style scoped>
.zhtt-form-builder-generator-main{
  flex:1;
  background: #fff;
  margin:0 4px;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.zhtt-form-builder-generator-main-render{
  height: 100%;
  padding: 8px;
}
.zhtt-form-builder-generator-main>.zhtt-container-material,
.zhtt-form-builder-generator-main>.zhtt-container-material>.zhtt-smooth-container{
  width: 100%!important;
  height: 100%!important;
}

</style>
